<%@page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .xz{
        width: 100%;
        height: 760px;
        background: #E0E0E0;
         border-radius: 20px 20px 0 0 ;
    }
    .xz .bt{
        width: 100%;
        height: 50px;
        background: #ee5a14;
        border-radius: 20px 20px 0 0 ;
        padding-top: 10px;
        float: left;
    }
    .btleft{
        width:68%;
        height: 40px;
        /* margin-left: 5%; */
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .btright{
        width:32%;
        height: 40px;
        margin-right: 0%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        float: left;
    }
    .bt select{
        margin-top: -10px;
        height: 30px;
    }
    .first select{
        margin-top: -8px;
        height: 30px;
        font-weight: normal;
    }
    .two{
      width: 100%;
      float: left;
    }
    .three{
       width: 100%;
       float: left;
       margin-bottom: 0px;
    }
    .clubsweek{
        margin-top:60px;width: 40%;height:400px; background: red; float: left;
    }
    .rank{
      width: 40%;
      float: left;      
      background: #fbc80b; 
      height: 300px;
      border-radius: 20px 20px 0 0 ;
      margin-bottom: 30px;
      margin-top: 20px;
      margin-left: 5%;
    }
    .ranktop{
      width: 100%;
      background: #28495a;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      border-radius: 20px 20px 0 0 ;        
      color:#FFF;
    }
    .ran{
    margin-top:-5px;
    }
    </style>
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">学生数据</a>
        <a>
          <cite>学生班级数据</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="xz">
          <div class="bt">
              <div class="btleft">
                <div class="layui-input-inline">
                  <select  style="width:120px;" name="province" lay-filter="province" id="departments">
                    <option value="">选择系别</option>
                    <c:forEach items="${departList}" var="d">
						<option  value="${d.id}">${d.name }</option>
					</c:forEach>
                  </select>
                </div>
				<div class="layui-input-inline">
					<select style="width:120px;" name="province" lay-filter="province" id="findMajors">
					<option value="">选择专业</option>
					 <c:forEach items="${majoryList}" var="m">
							<option  value="${ m.id}">${ m.name}</option>
					</c:forEach>
					</select>
				</div>
				<div class="layui-input-inline">
                  <select style="width:120px;" name="province" lay-filter="province" id="selectClass">
                  <option value="">选择班级</option>
                    <c:forEach items="${classList}" var="c">
							<option value="${ c.id}">${ c.name}</option>
					</c:forEach>
                  </select>
                </div>
                班级
              </div>
              <div class="btright">
              学年
                <div class="layui-input-inline">
                 <select style="width:120px;" id="yearTermId">
				     <option value="">选择学期</option>
						<c:forEach items="${yearTermList}" var="y">
							<option ${y.id==yearTermId? "selected":""} value="${ y.id}">${y.year }${y.term==1?'第一学期':'第二学期' }</option>
						</c:forEach>
				</select>
                </div>
              </div>
          </div>
          <div class="two">
            <div id="classfirst" style="margin-top:20px;width: 50%;height:280px; float: left;"></div>  
            <div id="classtych" style="margin-top:20px;width: 50%;height:280px; float: left;"></div> 
          </div>
          <div class="three">
            <div id="classtc" style="margin-top:60px;width: 50%;height:280px; float: left;"></div>
            <div class="rank">
                <div class="ranktop">本班健步里程排行表（前六）</div>
                <table class="layui-table ran">
                  <thead>
                    <tr>
                      <th>名次</th><th>姓名</th><th>学号</th><th>里程</th>
                    </tr>
                  </thead>
                <tbody>
                    <tr><td>1</td><td></td><td></td></tr>
                </tbody>
                </table>
            </div>
          </div>
      </div>

    </div>
    <script>   
        var classfirst = echarts.init(document.getElementById('classfirst'));
        var classtych = echarts.init(document.getElementById('classtych'));
        var classtc = echarts.init(document.getElementById('classtc'));
        
        var selectDepartment;
        var selectMajory;
        $("#departments").change(function(){
        	selectDepartment=$("#departments").val();
        	 $("#selectClass").empty();
    		changeDepartmentInfo(selectDepartment);
    	});  
        
        $("#findMajors").change(function() {
        	selectMajory=$("#findMajors").val();
        	changeMajoryInfo(selectMajory);
		});
        
        $("#yearTermId").change(function (){
        	var claId=$('#selectClass option:selected').val();
        	var yearTermId= $('#yearTermId option:selected').val();
        	if(claId!=null && claId!=''&& yearTermId!=null && yearTermId!=''){
        		classClubNum();
            	classCervixGrades();
            	classClubCj();
        	}
        	else{
        		if(claId==null || claId==''){
    	            layer.alert('请选择班级！',{
    	                icon:5});
        		}
        		if(yearTermId==null || yearTermId==''){
    	            layer.alert('请选择学年！',{
    	                icon:5});        			
        		}
        	} 	
        });
        $("#selectClass").change(function (){
        	var claId=$('#selectClass option:selected').val();
        	var yearTermId= $('#yearTermId option:selected').val();
        	if(claId!=null && claId!=''&& yearTermId!=null && yearTermId!=''){
        		classClubNum();
            	classCervixGrades();
            	classClubCj();
        	}
        	else{
        		if(yearTermId!=null || yearTermId!=''){
    	            layer.alert('请选择学年！',{
    	                icon:5});
        		}
        	}
        });
        
        function changeDepartmentInfo(selectDepartment){
        	$("#findMajors").empty();
        	if(selectDepartment!=null && selectDepartment!=''){
        	$.ajax({
        		url:"<%=request.getContextPath()%>/student/findMajory",
        		type:"get",
        		data:{"department":selectDepartment},
        		dataType: "json",
        		async:false,
        		success:function(result){
        			$.each(result, function(i, m){
						$("#findMajors").append('<option value="' + m.id + '" ' + (findMajors ==m.id ? 'selected':'') + '>' + m.name + '</option>');
					});
        		},
        		error:function(){
		            layer.alert('数据访问出错',{
		                icon:5});
        		}
        	});
        	}else{
	            layer.alert('请选择专业！',{
	                icon:5});
        	}
        }
        
        function changeMajoryInfo(selectMajory){
         $("#selectClass").empty();
       	 $.ajax({
       		url:"<%=request.getContextPath()%>/student/findClass",
       		type:"get",
       		data:{"majoryId":selectMajory},
       		dataType: "json",
       		async:false,
       		success: function (result){
       			document.getElementById("selectClass").options.length = 0;
       			if(result.length>0 && result!=null){
						$.each(result, function(i, c){
							$("#selectClass").append('<option value="' + c.id + '" ' + (selectClass ==c.id ? 'selected':'') + '>' + c.name + '</option>');
						});
					}else{
						$("#selectClass").append('<option value="">该学期没有俱乐部信息</option>');
					}
       		},
       		error:function(){
	            layer.alert('数据访问出错',{
	                icon:5});
       		}
       	});
        }
        //各俱乐部人数分布json
        var clubName=[];//俱乐部名称
        var clubValue=[];//俱乐部对应的值
        var sportName=[];//体测项目名称
        var excellentNum=[];//优秀人数
        var goodNum=[]//良好人数
        var passNum=[]//及格人数
        var failNum=[]//不及格人数
        var seriesClub1=[];//班级各俱乐部人数分布series
    /*班级各俱乐部人数分布图格式*/
	classfirst.setOption({
	  title : {
	      text: '班级各俱乐部人数分布',
	       x:'center'
	  },
	  tooltip : {
	      trigger: 'axis'
	  },
	  color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	  grid:{
	      x:40,
	      y:40,
	      x2:70,
	      borderWidth:1
	  },
	  legend: {
	      x:70,
	      y:5,
	  },
	  dataZoom: [
	      {
	          show: true,
	          realtime: true,
	          start: 0,
	          end: 100,
	      },
	      {
	          type: 'inside',
	          realtime: true,
	          start: 30,
	          end: 70,
	      }
	  ],
	  calculable : true,
	  xAxis : [
	      {
	          type : 'category',
	          data : [],
	      }
	  ],
	  yAxis : [
	      {
	          type : 'value',
	          name:'人数',
	      }
	  ],
	  series : [
	      {
	          type:'bar',
	          data:[],
	      },
	  ]
	});
    

	/*班级体育成绩各层次人数图格式*/
	classtych.setOption({
	    title : {
	        text: '班级体育成绩各层次人数',
	         x:'center'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    color:['#9bcd38','#fbc80b','#ee5a14','#353537'],
	    grid:{
	        x:40,
	        y:40,
	        x2:70,
	        borderWidth:1
	    },
	    legend: {
	        x:70,
	        y:5,
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ['0-59分','60-70分','70-80分','80-90分','90-100分',],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name:'人数',
	        }
	    ],
	    series : [
	        {
	            type:'bar',
	            data:[5, 15, 29, 5, 4],
	        },
	    ]
	  });
	
	
	
	/*班级各项体测成绩分布图格式*/
	classtc.setOption({
	    title : {
	        text: '班级各项体测成绩分布',
	         x:70
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	    grid:{
	        x:40,
	        y:40,
	        x2:70,
	        borderWidth:1
	    },
	    legend: {
	        x:'right',
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : [],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name:'人数',
	        }
	    ],
	    series : [
	        {
	            name:'不及格',
	            type:'bar',
	            data:[],
	        },
	        {
	            name:'及格',
	            type:'bar',
	            data:[],
	        },
	        {
	            name:'良好',
	            type:'bar',
	            data:[],
	        },        
	        {
	            name:'优秀',
	            type:'bar',
	            data:[],
	        },
	    ]
	});
	
	
	/*--------------------------数据操作---------------------------*/
    /*班级体育成绩分布图数据*/
     function classClubCj(){
    		var xdata=[];
    		var seriesdata=[];
    		var departId=$('#departments option:selected').val();
        	var claId=$('#selectClass option:selected').val();
        	var yearTermId= $('#yearTermId option:selected').val();
        	if(departId==null||departId==''){
          		if(claId==null||claId==''){
          			if(yearTermId==null||yearTermId==''){
          				departId=4;
          				claId=696;
          				yearTermId=5;
          			}
          		}
          	} 
        	$.ajax({
        		url:"<%=request.getContextPath()%>/student/classNumScore",
        		type:"get",
        		data:{"departId":departId,"claId":claId,"yearTermId":yearTermId},
        		dataType:"json",
        		async:false,
        		success: function (result) {
        			console.log(result);
        			for(var i=0;i<result.length;i++){
        				xdata[i]=result[i].score;
        				seriesdata[i]=result[i].value;
        			}
        			classtych.setOption({
        			    xAxis : [
        			        {
        			            data : xdata,
        			        }
        			    ],
        			    series : [
        			        {
        			            type:'bar',
        			            data:seriesdata,
        			        },
        			    ]
        			  });
				},
				error:function() {
		            layer.alert('数据访问出错',{
		                icon:5});
				}	
        	});
        }	
    /*班级各俱乐部人数分布图数据*/
     function classClubNum(){
    	
        	var departId=$('#departments option:selected').val();
        	var claId=$('#selectClass option:selected').val();
        	var yearTermId= $('#yearTermId option:selected').val();
        	if(departId==null||departId==''){
          		if(claId==null||claId==''){
          			if(yearTermId==null||yearTermId==''){
          				departId=4;
          				claId=696;
          				yearTermId=5;
          			}
          		}
          	}
        	$.ajax({
        		url:"<%=request.getContextPath()%>/student/getClubSizeDistribution",
        		type:"get",
        		data:{"departId":departId,"claId":claId,"yearTermId":yearTermId},
        		dataType:"json",
        		async:false,
        		success: function (result) {
        			clubName=[];
        			clubValue=[];
					for(var i=0 ; i < result.length ; i++){
						clubName.push(result[i].name);
						clubValue.push(result[i].value);
					}
					seriesClub1=[];
					seriesClub1.push({
						type:'bar',
				          data:clubValue,
					});
					classfirst.setOption({
						  xAxis : [
						      {
						          type : 'category',
						          data : clubName,
						      }
						  ],
						  series : seriesClub1
					})

				},
				error:function() {
		            layer.alert('数据访问出错',{
		                icon:5});
				}	
        	});
        }
	/*班级体育成绩各层次人数图数据*/
/* 	classtych.setOption({
	    xAxis : [
	        {
	            data : ['0-59分','60-70分','70-80分','80-90分','90-100分',],
	        }
	    ],
	    series : [
	        {
	            type:'bar',
	            data:[5, 15, 29, 5, 4],
	        },
	    ]
	  }); */
	/*班级各项体测成绩分布图数据*/
	/*班级各项体测成绩分布图格式json获取*/
	  var seriesClassSport=[]//班级各项体测成绩分布series
	function classCervixGrades() {
		var departId=$('#departments option:selected').val();
      	var claId=$('#selectClass option:selected').val();
      	var yearTermId= $('#yearTermId option:selected').val();
      	if(departId==null||departId==''){
      		if(claId==null||claId==''){
      			if(yearTermId==null||yearTermId==''){
      				departId=4;
      				claId=696;
      				yearTermId=5;
      			}
      		}
      	}
    	$.ajax({
    		url:"<%=request.getContextPath()%>/stamina/getProjectLevelNum",
    		type:"get",
    		data:{"departId":departId,"claId":claId,"yearTermId":yearTermId},
    		dataType:"json",
    		async : false,
    		success:function(result){
    			  sportName=[];//体测项目名称
    		      excellentNum=[];//优秀人数
    		      goodNum=[]//良好人数
    		      passNum=[]//及格人数
    		      failNum=[]//不及格人数
    			for(var i=0;i<result.length;i++){
    				sportName.push(result[i].name);
    				excellentNum.push(result[i].excellentNum);
    				goodNum.push(result[i].goodNum);
    				passNum.push(result[i].passNum);
    				failNum.push(result[i].failNum);
    			}
    		      seriesClassSport=[];
    		      seriesClassSport.push({
    			            name:'不及格',
    			            type:'bar',
    			            data:failNum,
    			        });
    		      seriesClassSport.push({
    			            name:'及格',
    			            type:'bar',
    			            data:passNum,
    			        });
    		      seriesClassSport.push({
    			            name:'良好',
    			            type:'bar',
    			            data:goodNum,
    			        });       
    		      seriesClassSport.push({
    			            name:'优秀',
    			            type:'bar',
    			            data:excellentNum,
    			        });
    		      classtc.setOption({
    		    	   xAxis : [
    		   	        {
    		   	            type : 'category',
    		   	            data : sportName,
    		   	        }
    		   	    ],
    		   	  series :seriesClassSport
    		      });
    		},
    		error:function(){
	            layer.alert('数据访问出错',{
	                icon:5});
    		}
    	});
	}
	classClubNum(); //加载调用查询班级各俱乐部人数分布
	classCervixGrades();//加载调用查询班级各项体测成绩分布
	classClubCj();//加载调用查询班级体育成绩分布状况
    </script>
  </body>

</html>